<!--# 
layout("/layout/madmin.html",{'breadCrumbs': [{'name':'主页','icon':'home','url':'/'},{'name':'FTP资源列表','active':'active'}] ,'active':'ftp'}){ 
 #-->
<link type="text/css" rel="stylesheet" href="${base!}/resources/madmin/vendors/jplist/html/css/jplist-custom.css">
<style>
<!--
.list .list-item {
	width: 100%
}

.list .img {
	width: 45%
}

.list .block {
	width: 52%
}

.chart {
	min-height: 275px
}
-->
</style>
<div class="panel panel-green">
	<div class="panel-heading clearfix">
		<span class="mts pull-left"> FTP资源列表</span>
		<div class="toolbars">
			<a href="${base}/ftp/add" class="btn btn-embossed btn-info btn-sm"><i class="fa fa-plus-circle"></i> 添加FTP</a>
		</div>

		<div class="toolbars">
			<div class="col-md-1"></div>
		</div>

		<div class="toolbars">
			<div class="input-icon right">
				<form action="${base!}/permission/search" method="post" class="search-form">
					<i class="fa fa-search search-btn"></i> <input type="text" name="key" value="${obj.data.pager.paras.key!}" data-type="reg" data-reg="/^[\u4e00-\u9fa5\d\w]{1,}$/"
						data-default="Search..." data-error="请输入搜索关键词" placeholder="请输入搜索关键词" class="form-control input-medium">
				</form>
			</div>
		</div>
	</div>
	<div class="panel-body">
		<div class="row">
			<div class="col-lg-12">
				<div class="panel">
					<div class="panel-body">
						<div id="grid-filter-with-ul-li" class="box jplist">
							<div class="list box text-shadow">
								<!--# for(ftp in obj.data.pager.entities){ #-->
								<div class="list-item box">
									<!--<img/>-->
									<div class="img chart" id="chart_${ftp.uuid!}" data-id='${ftp.id!}'></div>
									<!--<data></data>-->
									<div class="block">
										<div class="portlet box portlet-info">
											<div class="portlet-header">
												<div class="caption">${ftp.name!} (${ftp.server!})基本信息</div>
												<div class="actions">
													&nbsp; <a href="${base!}/ftp/edit/${ftp.uuid!}" class="btn btn-sm btn-white"><i class="fa fa-edit"></i>&nbsp; 编辑</a>&nbsp;<a href="#"
														class="btn btn-sm btn-danger btn-delete" data-url='/ftp/delete' data-id='${ftp.uuid!}'><i class="fa fa-user"></i>&nbsp; 删除</a>
												</div>
												<div class="tools">
													<i class="fa fa-chevron-up"></i>
												</div>
											</div>
											<div class="portlet-body">
												<blockquote>
													<div class="row">
														<div class="col-md-3">类型</div>
														<div class="col-md-3">${ftp.type!}</div>
														<div class="col-md-3">端口</div>
														<div class="col-md-3">${ftp.port!}</div>
													</div>
													<div class="row">
														<div class="col-md-3">描述</div>
														<div class="col-md-9">${ftp.description!}</div>
													</div>
												</blockquote>
											</div>
										</div>
										<div class="portlet box portlet-info">
											<div class="portlet-header">
												<div class="caption">更多信息</div>
												<div class="tools">
													<i class="fa fa-chevron-down"></i>
												</div>
											</div>
											<div style="display: none;" class="portlet-body">
												<blockquote>
													<table class="table table-hover">
														<thead>
															<tr>
																<th>检测周期</th>
																<th>告警规则</th>
															</tr>
														</thead>
														<tbody>
															<tr>
																<td>${ftp.testingperiod.name!}(${ftp.taskCron!})</td>
																<td>${ftp.alarmEL!}</td>
															</tr>
														</tbody>
													</table>
												</blockquote>
											</div>
										</div>
									</div>
								</div>
								<!--# } #-->
							</div>
							<!--#if(obj.data.pager.count == 0){  #-->
							<div class="box jplist-no-results text-shadow align-center">
								<p>No results found</p>
							</div>
							<!--# }else{ #-->
							<div class="box jplist-no-results text-shadow align-center">
								<div class="pull-right">${obj.data.pager.pagerBar!}</div>
							</div>
							<!--# }#-->
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript" src="${base}/resources/echarts/echarts.js"></script>
<script type="text/javascript" src="${base}/resources/echarts/dark.js"></script>
<script type="text/javascript">
<!--
	var charts = {};
	$(function() {
		$('.chart').each(function() {
			var temp = echarts.init(this, 'dark');
			var uuid = $(this).data('id');
			charts['chart_' + uuid] = temp;
		});
		showCharts();
		setInterval(showCharts, 5000);
	})

	function showCharts() {
		$('.chart').each(function() {
			var uuid = $(this).data('id');
			var chart = charts['chart_' + uuid];
			$.post('${base}/ftp/charts', {
				id : uuid
			}, function(result) {
				var xAxisData1 = [];
				var series1 = [];
				var series2 = [];
				$(result.data.connection).each(function(i, item) {
					xAxisData1[i] = $.str2Date(item.r_monitor_time).format("mm:ss");
					series1[i] = item.r_duration / 1000000;
				});
				$(result.data.download).each(function(i, item) {
					series2[i] = item.r_duration / 1000000;
				});
				option = {
					tooltip : {
						trigger : 'axis'
					},
					legend : {
						data : [ '连接耗时', '下载耗时' ]
					},
					toolbox : {
						feature : {
							saveAsImage : {}
						}
					},
					xAxis : {
						type : 'category',
						boundaryGap : false,
						data : xAxisData1
					},
					yAxis : {
						type : 'value',
						axisLabel : {
							formatter : function(value, index) {
								return value  + ' ms';
							}
						}
					},
					series : [ {
						name : '连接耗时',
						type : 'line',
						data : series1
					}, {
						name : '下载耗时',
						type : 'line',
						data : series2
					} ]
				};

				if (option && typeof option === "object") {
					chart.setOption(option, true);
				}
			}, 'json');
		});
	}
//-->
</script>
<!--# } #-->